<template>
  <view class="user">
    <!-- 上方显示用户信息的区域 -->
    <view class="userinfo">
      <!-- 信息区域 -->
      <view class="top">
        <view class="avator">
          <uni-icons type="person-filled" size="30" 
            :color="logColor"></uni-icons>
        </view>
		<view class="uname" v-if="store.isLogin">
			<view>{{store.userInfo.username}}</view>
			<view>{{store.userInfo.email}}</view>
		</view>
        <view class="uname" v-else @tap="toLogin">点击登录</view>
      </view>
    </view>
    <!-- 下方显示的四项用户操作项 -->
    <view class="list">
      <uni-list>
        <uni-list-item v-for="item,index in manageList" 
          :title="item.name" :show-extra-icon="true"
          :extra-icon="item.icon" clickable link @tap="navto(index)" ></uni-list-item>
      </uni-list>
    </view>
  </view>
</template>

<script setup>
	import {
		ref, onMounted
	} from 'vue'
	
	
	import {
		userStore
	} from '../../store/userStore.js';
	let store=userStore()
	let logColor=ref("#ccc")
	const manageList = ref([{
	  name: '美食景点收藏',
	  icon: {
	    color: '#56c48b',
	    size: '22',
	    type: 'shop'
	  }
	}, {
	  name: '电影收藏',
	  icon: {
	    color: '#ff6700',
	    size: '22',
	    type: 'location-filled'
	  }
	}, {
	  name: '修改密码',
	  icon: {
	    color: '#0225ff',
	    size: '22',
	    type: 'star'
	  }
	}, {
	  name: '退出登录',
	  icon: {
	    color: '#0081b9',
	    size: '22',
	    type: 'gear'
	  }
	}])
	
	// 在组件挂载时设置登录状态的颜色
	onMounted(() => {
		if (store.isLogin) {
			logColor.value = "#007AFF"
		}
	})
	
	function navto(index)
	{
		if (!store.isLogin) {
			uni.showToast({
				title: '请先登录',
				icon: 'none'
			})
			return
		}
		
		switch (index) {
			case 0: // 美食景点收藏
				uni.navigateTo({
					url: '/pages/user/favorite-spots'
				})
				break
			case 1: // 电影收藏
				uni.navigateTo({
					url: '/pages/user/favorite-movies'
				})
				break
			case 2: // 修改密码
				uni.navigateTo({
					url: '/pages/user/change-password'
				})
				break
			case 3: // 退出登录
				uni.showModal({
					title: '提示',
					content: '确定要退出登录吗？',
					success: function(res) {
						if (res.confirm) {
							store.logout()
							logColor.value = "#ccc"
							uni.showToast({
								title: '已退出登录',
								icon: 'success'
							})
						}
					}
				})
				break
		}
	}
	
	function toLogin(){
		uni.navigateTo({
			url:"/pages/login/login"
		})
	}
</script>

<style lang="scss">
	.user{
		// 设置页面高度和背景色
		height: calc(100vh - 95px);
		background-color: $uni-bg-color-grey;
		.userinfo{
			height: 200px;
			background-color: #85bded;
			.top{
				display: flex;
				align-items: center;
				position: absolute;
				left: 50px;
				top: 50px;
				.avator{
					width: 40px;
					height: 40px;
					background-color: #fff;
					border-radius: 50%;
					text-align: center;
					line-height: 40px;
				}
				.uname{
					color: #fff;
					font-size: 14px;
					padding-left: 5px;
				}
			}
			.list{
				width: 710rpx;
				margin:20rpx auto;
			}
		}
}
</style>